<template>
  <div>
    <span class="search-condition-item-label"
          :title="attr.title">{{ attr.title ? attr.title : '' }}</span>
    <div class="search-condition-item-widget">
      <a-date-picker class="search-condition-item-date"
                     :placeholder="placeholder"
                     :value="startDate"
                     :disabled-date="disabledStartDate"
                     @change="onStartDateChange" />
      <span class="search-condition-item-date-space">-</span>
      <a-date-picker class="search-condition-item-date"
                     :placeholder="placeholder"
                     :value="endDate"
                     :disabled-date="disabledEndDate"
                     @change="onEndDateChange" />
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          items: []
        }
      },
      value: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        startDate: this.value && this.value.startDate ? this.value.startDate : '',
        endDate: this.value && this.value.endDate ? this.value.endDate : '',
        placeholder: this.attr.placeholder
          ? this.attr.placeholder
          : this.$i18n('base.fiber.placeholder'),
        formatStr: 'YYYY-MM-DD'
      };
    },
    watch: {
      value(newVal, oldVal) {
        console.log('----', newVal);
        if (newVal && newVal.startDate) {
          this.startDate = newVal.startDate;
        } else {
          this.startDate = '';
        }

        if (newVal && newVal.endDate) {
          this.endDate = newVal.endDate;
        } else {
          this.endDate = '';
        }
      }
    },
    methods: {
      disabledStartDate(startValue) {
        const endValue = this.endDate;
        if (!startValue || !endValue) {
          return false;
        }
        return startValue.format(this.formatStr) > endValue;
      },
      disabledEndDate(endValue) {
        const startValue = this.startDate;
        if (!endValue || !startValue) {
          return false;
        }
        return startValue > endValue.format(this.formatStr);
      },
      onStartDateChange(date, dateString) {
        if (this.startDate != dateString) {
          this.startDate = dateString;
          if (dateString == '' && this.endDate == '') {
            this.$emit('valueChange', { key: this.attr.key, value: null });
          } else {
            this.$emit('valueChange', {
              key: this.attr.key,
              value: { startDate: dateString, endDate: this.endDate }
            });
          }
        }
      },
      onEndDateChange(date, dateString) {
        if (this.endDate != dateString) {
          this.endDate = dateString;
          if (dateString == '' && this.startDate == '') {
            this.$emit('valueChange', { key: this.attr.key, value: null });
          } else {
            this.$emit('valueChange', {
              key: this.attr.key,
              value: { startDate: this.startDate, endDate: dateString }
            });
          }
        }
      },
      getFormatValue() {
        if (this.endDate == '' && this.startDate == '') {
          return {};
        } else {
          const key = this.attr.key;
          const formatValue = {};
          formatValue[key] = this.startDate + '#' + this.endDate;
          return formatValue;
        }
      }
    }
  };
</script>

<style scoped>
  .search-condition-item-widget {
    display: flex;
  }
  .search-condition-item-date {
    flex: 1 1 auto;
  }
  .search-condition-item-date-space {
    display: block;
    padding: 0px 4px;
  }
  ::v-deep .ant-calendar-picker .ant-calendar-picker-input {
    padding-right: 24px !important;
  }
  ::v-deep .ant-calendar-picker .ant-calendar-picker-icon {
    right: 8px;
  }
  ::v-deep .ant-calendar-picker .ant-calendar-picker-clear {
    right: 8px;
  }
</style>
